<template>
  <div class="entry-box">
    <div class="entry-header">{{ info.fast }}</div>
    <div class="entry-options">
      <div
        v-for="fastItem in fastList"
        :key="fastItem.name"
        class="entry-item"
        @click="handleGotoMenu(fastItem.menuId)"
      >
        <div class="entry-icon" :style="{ 'background-color': fastItem.color }">
          <i :class="fastItem.icon"></i>
        </div>
        <div class="entry-name">{{ fastItem.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, onMounted } from 'vue';
  import { useI18n } from '@common/locales';
  import { useMicroStore } from '@common/store/micro-store';
  export default defineComponent({
    name: 'FastEntry',
    setup() {
      const microStore = useMicroStore();
      const t = useI18n().t;
      const state = {
        info: {
          fast: t('manageBoard.fast'),
        },
        fastList: [
          {
            name: t('manageBoard.institute'),
            icon: 'fal fa-university',
            color: '#f24f54',
            menuId: 'TGyp7363FHCA0vCbta1',
          },
          {
            name: t('manageBoard.company'),
            icon: 'fal fa-building',
            color: '#00b5b5',
            menuId: 'mdVP5HXRhU6tW81gyOD',
          },
          {
            name: t('manageBoard.organizations'),
            icon: 'fal fa-book-user',
            color: '#00a664',
            menuId: '2bKMlLkDRrcIqU0CKAa',
          },
          {
            name: t('manageBoard.employee'),
            icon: 'fal fa-user-circle',
            color: '#fe774b',
            menuId: 'C8rDleZDkaDofjoVzVf',
          },
          {
            name: t('manageBoard.account'),
            icon: 'fal fa-address-book',
            color: '#fbc754',
            menuId: '8XWOwRowZdPAY3QVyHw',
          },
          {
            name: t('manageBoard.role'),
            icon: 'fal fa-user',
            color: '#7a6ff1',
            menuId: '2vzSVrGzlXYcFuEdthx',
          },
          {
            name: t('manageBoard.authorization'),
            icon: 'jeicon jeicon-data',
            color: '#00b5b5',
            menuId: 'CCVm3AKWSVmmiczQLjn',
          },
          {
            name: t('manageBoard.process'),
            icon: 'fal fa-sliders-h-square',
            color: '#00a664',
            menuId: '',
          },
          {
            name: t('manageBoard.login'),
            icon: 'fal fa-laptop-code',
            color: '#f24f54',
            code: 'X4rt3Ma2Hou9SCaDRw8',
          },
          {
            name: t('manageBoard.note'),
            icon: 'fal fa-comment-alt-dots',
            color: '#fe774b',
            menuId: '3a859226-b389-43f0-adaa-fe492b4262cb',
          },
          {
            name: t('manageBoard.mail'),
            icon: 'fal fa-mailbox',
            color: '#fbc754',
            menuId: 'VwGzlQV4I9w2FMB7iW8',
          },
          {
            name: t('manageBoard.authCode'),
            icon: 'fal fa-file-edit',
            color: '#7a6ff1',
            menuId: 'mBOnTdKmebYjJA3z2b6',
          },
        ],
      };
      const handleGotoMenu = (menuId) => {
        if (menuId) {
          //跳转到对应功能模块
          microStore.emitAdmin('admin-openmenu', { menuId: menuId });
        }
      };
      onMounted(() => {});
      return {
        handleGotoMenu,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .entry-box {
    width: 240px;
    height: 936px;
    border-radius: 4px;
    background-color: #ffffff;
    .entry-header {
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      font-size: 16px;
      font-weight: bold;
      color: #3f3f3f;
    }
    .entry-options {
      width: 100%;
      padding: 20px 30px 0;
      .entry-item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        cursor: pointer;
        .entry-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          font-size: 20px;
          color: #ffffff;
          text-align: center;
          line-height: 40px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          i {
            font-size: 20px;
          }
        }
        .entry-name {
          padding-left: 20px;
          font-size: 14px;
          color: #3f3f3f;
        }
      }
    }
  }
</style>
